<template>
  <div id="vueapp" class="main">
    <div class="head" style="margin-bottom: 20px; color: #eeeeee">
      <h1>国标设备扫码注册</h1>
    </div>

    <Card>
      <div class="content-div">
        <div class="left">
          <canvas id="canvas"  v-show="1===0" ref="canvas" style="cursor: pointer" @click="clickZoomIn"/>


<!--          <div id="canvas"  v-show="!isZoom" ref="canvas" style="width: 500px;height: 500px" @click="zoomIn"></div>-->
          <!--<canvas style="width: 500px;height: 500px;background-color: #c80000; cursor: pointer" id="qcodecanvas">  </canvas>-->
          <Card style="width: 500px;height: 500px" v-show="isZoom">
            <canvas style="width: 100%;height: 100%; cursor: pointer" id="largeQrCode" @click="clickZoomIn"/>
<!--            <div style="background-color: #FFFFFF; width: 100%; height: 100%">
              <img id="largeQrcode"  v-show="isZoom" :src="qrSrc" style="padding: 10px; width: 100%;height: 100%"><img>
            </div>-->
            <span style="margin-top:20px; color: #eeeeee">点击二维码可放大</span>
          </Card>

        </div>
        <div class="device-info">
          <div class="row">
            <span class="label">服务器ID:</span>
            <i-input class="input" v-model="codeSource.gbServerCode"></i-input>
          </div>
          <div class="row">
            <span class="label">域:</span>
            <i-input class="input" v-model="codeSource.gbServerDomain"></i-input>
          </div>
          <div class="row">
            <span class="label">IP址址:</span>
            <i-input class="input" v-model="codeSource.gbServerHost"></i-input>
          </div>
          <div class="row">
            <span class="label">端口:</span>
            <i-input class="input" v-model="codeSource.gbServerPort"></i-input>
          </div>
          <div class="row">
            <span class="label">用户:</span>
            <i-input class="input" v-model="codeSource.userName"></i-input>
          </div>
          <div class="row">
            <span class="label">密码:</span>
            <i-input class="input" v-model="codeSource.gbServerPasswrd"></i-input>
          </div>
          <div class="row">
            <span class="label">本地端口:</span>
            <i-input class="input" v-model="codeSource.localPort"></i-input>
          </div>
          <div class="row">
            <span class="label">注册周期:</span>
            <i-input class="input" v-model="codeSource.registerExpire"></i-input>
          </div>
          <div class="row">
            <span class="label">心跳间隔(秒):</span>
            <i-input class="input" v-model="codeSource.keepalive"></i-input>
          </div>
          <div class="row">
            <span class="label">设备ID:</span>
            <i-input class="input" v-model="codeSource.deviceId"></i-input>
          </div>
          <div class="row">
            <span class="label">视频通道:</span>
            <i-input class="input" v-model="codeSource.backChannel"></i-input>
          </div>
          <div class="row">
            <span class="label">音频通道:</span>
            <i-input class="input" v-model="codeSource.frontCamera"></i-input>
          </div>
          <div class="row">
            <span class="label">报警通道:</span>
            <i-input class="input" v-model="codeSource.alarmChannel"></i-input>
          </div>
          <div class="row">
            <span class="label">外接相机:</span>
            <i-input class="input" v-model="codeSource.extenalCamera"></i-input>
          </div>
        </div>
      </div>
      <div>
        <i-button @click="generateQRCode" >生成二维码</i-button>
        <i-button v-show="1===0" @click="clickZoomIn" >放大</i-button>
      </div>
    </Card>
    <Device4gQrcodeLarge ref="device4gQrcodeLarge"/>
  </div>
</template>
<script>
import Device4gQrcodeLarge from './Device4gQrcodeLarge' // 引入生成二维码插件
import QRCode from 'qrcode' // 引入生成二维码插件
export default {
  components: {Device4gQrcodeLarge},
  data(){
    return{
      deviceId: '',
      theme: 'darkblue',
      codeSource: {
        protocol: '01', // GB28181
        gbServerCode: '44030000492000000001',
        gbServerDomain: '4403000049',
        gbServerHost: '47.106.217.147',
        gbServerPort: '5060',
        userName: '44030000491130414054',
        gbServerPasswrd: '12345678',
        localPort: '15060',
        registerExpire: '3600',
        keepalive: '5',
        deviceId: '44030000491130414054',
        alarmChannel: '44030000491340414054',
        backChannel: '44030000491130414054',
        frontCamera: '44030000491370414054',
        extenalCamera: '',
        gbServerApiPort: '18090'
      },
      qrSrc: "",
      isZoom: false
    }
  },
  methods:{
    generateQRCode(){
      const qrCodeTxt = this.codeSource.protocol + '|' +
        this.codeSource.gbServerCode + '|' +
        this.codeSource.gbServerDomain + '|' +
        this.codeSource.gbServerHost + '|' +
        this.codeSource.gbServerPort + '|' +
        this.codeSource.userName + '|' +
        this.codeSource.gbServerPasswrd + '|' +
        this.codeSource.localPort + '|' +
        this.codeSource.registerExpire + '|' +
        this.codeSource.keepalive + '|' +
        this.codeSource.deviceId + '|' +
        this.codeSource.alarmChannel + '|' +
        this.codeSource.backChannel + '|' +
        this.codeSource.frontCamera + '|' +
        this.codeSource.extenalCamera + '|' +
        this.codeSource.gbServerApiPort

      console.log(qrCodeTxt)
      // this.qrCodeTxt = '你就是笨蛋'

      console.log(this.$refs.canvas)
      console.log(QRCode)
      QRCode.toCanvas(this.$refs.canvas, qrCodeTxt, function (error) {
        if (error) {
          console.error(error)
        } else {
          console.log('success!')
        }
      })

      setTimeout(() => { this.autoZoomIn() }, 1000)

      /*      const container = document.getElementById("canvas");
            // 清除之前的二维码
            container.innerHTML = "";
            this.isZoom =false;
            this.qrSrc="";
            qrcode = new QRCode(container, qrCodeTxt,this.errorHandle);
            // this.$nextTick(()=>{this.zoomIn()})
            setTimeout(() => { this.zoomIn() }, 1000)
            ;*/
    },
    autoZoomIn(){
      this.isZoom =false;
      const container = document.getElementById("canvas");
      const scale = 2 // 放大倍数
      const originalWidth = container.width
      const originalHeight = container.height

      // 创建新的 canvas 用于显示放大后的二维码
      const zoomedCanvas = document.getElementById('largeQrCode')
      zoomedCanvas.width = originalWidth * scale
      zoomedCanvas.height = originalHeight * scale
      const zoomedCtx = zoomedCanvas.getContext('2d')

      // 绘制放大后的二维码
      zoomedCtx.imageSmoothingEnabled = false // 禁用抗锯齿，保持清晰
      zoomedCtx.drawImage(container, 0, 0, originalWidth, originalHeight, 0, 0, zoomedCanvas.width, zoomedCanvas.height)
      this.isZoom =true;
    },
    clickZoomIn(){
      const canvas = document.getElementById('canvas')
      this.$refs.device4gQrcodeLarge.openDialog(canvas)
    },
    loadTheme(){
      const themeBasePath = './static/theme'; // 主题文件的基础路径
      const link = document.getElementById('theme-style');

      console.log([themeBasePath,this.theme])
      if (link) {
        // 修改现有 <link> 标签的 href 属性
        link.href = `${themeBasePath}/${this.theme}/iview.css?v=${Date.now()}`;
      } else {
        // 创建新的 <link> 标签
        const newLink = document.createElement('link');
        newLink.id = 'theme-style';
        newLink.rel = 'stylesheet';
        newLink.href = `${themeBasePath}/${this.theme}/iview.css?v=${Date.now()}`;

        // 错误处理
        newLink.onerror = () => {
          console.error(`Failed to load theme: ${this.theme}`);
        };

        // 添加到 <head> 中
        document.head.appendChild(newLink);
      }
    },
  },
  mounted(){
    this.loadTheme(this.theme)
  }
}
</script>
<style lang="less">
.main{
  /*margin-top: calc((100% - 220px)/2);*/
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  align-items: center;
}
.head{
  margin-top: 10px;
  display: flex;
  align-content: center;
  justify-content: center
}
.content-div {
  display: flex;
  justify-content: left;
  align-content: center;
  font-size: 16px;
  // background-color: #19c3eb;
  width: 1024px;
}
.device-info{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.left{
  width: 520px;
  height: 100%;
  //background-color: #e30c0c;
}
.span-rg{
  text-align: right;
}
.row{
  margin-top: 10px;
  width: 100%;
  display: flex;
}
.row .col {
  width: 50%;
}
.row .label {
  width: 200px;
  text-align: right;
  color: #FFFFFF;
}
.row .content {
  padding-left: 5px;
  width: 50%;
  text-align: left;
}
.row .input {
  padding-left: 10px;
}
</style>
